<template>
  <div class="matreial">
    <el-dialog
      v-dialogDrag
      :title="$t('menu.materielList')"
      model
      :visible.sync="isMaterialDialog"
      :close-on-click-modal="false"
      :before-close="handleClose"
      width="60%"
      top="5vh"
      append-to-body
    >
      <div class="materiel-form">
        <search :options="selectData" :msg="tacitly" @seek="collect" @hand="handleMaterielSearch" />
        <el-button size="mini" type="primary" class="btn" @click="handleMaterielSearch">{{ $t('btn.search') }}</el-button>
        <el-button v-if="false" size="mini" type="primary" class="btn btn1" @click="selectionSub">多选添加</el-button>
      </div>
      <jc-table
        :table-data="materielDialogData"
        :table-header="materielDialogHeader"
        table-height="53vh"
        serial
        @clickRow="materielSelectRow"
        @selectionChange="selectionData"
      >
        <el-table-column v-if="false" type="selection" width="30px" sortable="true" fixed="left" align="center" />
      </jc-table>
      <jc-pagination
        v-show="materielPagination.total > 0"
        :total="materielPagination.total"
        :page.sync="materielPagination.pageNum"
        :limit.sync="materielPagination.pageSize"
        @pagination="handleGetMateriel"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryMaterialList } from '@/api/marketManage/marketOrder'
import { queryMoList, queryPoorderLists } from '@/api/quality/index'
import searData from '@/components/Search/mixin'
import search from '@/components/Search'
import { queryTBdCodeList } from '@/api/wms/stock'
export default {
  components: {
    search
  },
  mixins: [searData],
  props: {
    msg: { // 下标
      type: Number,
      default: 2
    }, index: { // 下标
      type: Number,
      default: 2
    }, msg1: { // 价目ID
      type: [Number, String],
      default: 0 || ''
    }, fnumbers: { // 海绵库
      type: String,
      default: ''
    },
    qc: {
      type: String,
      default: ''
    },
    fid: {
      type: Number,
      default: 0
    },
    fispurChase: { // 采购申请单 1-允许采购
      type: String,
      default: ''
    },
    fissale: { // 销售单 1-允许销售
      type: String,
      default: ''
    },
    fisasset: { // 资产卡片 1-允许资产
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ftype: 0,
      fbillNo: 'fnumber', // 编码
      isMaterialDialog: true,
      // 点击行的序号
      tableIndex: 0,
      rateIndex: '', // 行序号(第几行)
      // 物料弹窗分页
      materielPagination: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      materielDialogData: [],
      materielDialogHeader: [
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', minWidth: '140px' },
        { label: this.$t('shop.fname2'), prop: 'fname', minWidth: '120px' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion', minWidth: '120px' },
        { label: this.$t('market.descrip'), prop: 'fdescripTion', minWidth: '300px' },
        { label: this.$t('market.funit'), prop: 'funit', width: '120px' }
      ],
      prodValue: { isMaterialDialog: false }
    }
  },
  watch: {
    msg() {
      this.tableIndex = this.msg
    },
    index() {
      this.index1 = this.index
    }
  },
  created() {
    this.handleGetMateriel()
  },
  methods: {
    // 多选时触发的事件
    selectionData(val) {
      this.val = val
    },
    selectionSub() {
      if (this.val.length <= 0) {
        this.$message.warning('请选择数据!')
        return
      }
      this.val.forEach((item, index) => {
        this.tableIndex = this.index + index
        this.materielSelectRow(item, this.tableIndex)
      })
      this.isMaterialDialog = false
    },
    // 物料弹窗选中
    async materielSelectRow(item, index) {
      this.prodValue = item
      this.prodValue.index = index
      this.$emit('material', this.prodValue)
    },
    // 打开物料编码
    async handleGetMateriel() {
      const DATA = {
        pageNum: this.materielPagination.pageNum,
        pageSize: this.materielPagination.pageSize,
        search: this.searCollData,
        fnumbers: this.fnumbers,
        fid: this.fid, // 品质-生产、采购物料
        fissale: this.fissale, // 销售订单-允许销售
        fisasset: this.fisasset, // 资产卡片-允许资产
        fispurChase: this.fispurChase // 采购申请-允许采购
        // fid: this.msg1
      }
      // 发起请求
      if (this.qc === 'IQC') {
        const { data: RES } = await queryPoorderLists(DATA)
        this.materielDialogData = RES.array
        this.materielPagination.total = RES.total
      } else if (this.qc === 'FQC' || this.qc === 'OQC') {
        const { data: RES } = await queryMoList(DATA)
        this.materielDialogData = RES.array
        this.materielPagination.total = RES.total
      } else if (this.qc === 'code') {
        const { data: RES } = await queryTBdCodeList(DATA)
        this.materielDialogData = RES.list
        this.materielDialogData.map(res => {
          res.fnumber = res.materialfnumber
          res.fname = res.materialfname
          res.fspecificaTion = res.fspecification
          res.fdescripTion = res.fdescription
          res.funit = res.unit
        })
        this.materielPagination.total = RES.total
      } else if (this.qc === '') {
        const { data: RES } = await queryMaterialList(DATA)
        this.materielDialogData = RES.array
        this.materielPagination.total = RES.total
      }
    },
    // 搜索
    handleMaterielSearch() {
      this.materielPagination.pageNum = 1
      this.handleGetMateriel()
    },
    // 关闭前回调
    handleClose() {
      this.prodValue.ismarketlDialog = false
      this.$emit('material', this.prodValue)
    }
  }
}
</script>
<style scoped lang="scss">
.materiel-form{
  position:relative;
  width: 100%;
  margin-bottom: 15px;
  .btn{
    transform: translateY(18%);
    margin-left: 450px !important;
  }
  .btn1 {
    margin-left: 15px !important;
  }
}
.el-table {
  margin-top: 15px;
}
</style>

